<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书海寻踪 - 专业小说搜索平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#2b4acb',
                    secondary: '#666666'
                },
                borderRadius: {
                    'none': '0px',
                    'sm': '2px',
                    DEFAULT: '4px',
                    'md': '8px',
                    'lg': '12px',
                    'xl': '16px',
                    '2xl': '20px',
                    '3xl': '24px',
                    'full': '9999px',
                    'button': '4px'
                }
            }
        }
    }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            min-height: 1024px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 30px;
        }
        .search-input {
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            font-size: 14px;
            background: transparent;
        }
        .search-input::placeholder {
            color: #999;
        }
        .book-cover {
            width: 200px;
            height: 280px;
            object-fit: cover;
            border-radius: 16px;
        }
        .book-title {
            width: 100%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <!-- 添加 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 http.js 文件 -->
    <script src="http.js"></script>
    <!-- 引入 layui 库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
</head>
<body>
    <div class="container">
        <header class="flex justify-between items-center py-8">
            <div class="logo">
                <h1 class="text-4xl font-bold text-primary font-['Pacifico']">书海寻踪</h1>
            </div>
            <nav class="flex gap-10">
                <a href="#" class="text-base font-bold text-primary">首页</a>
                <a href="#" class="text-base text-secondary hover:text-primary">分类</a>
                <a href="#" class="text-base text-secondary hover:text-primary">排行</a>
            </nav>
        </header>

        <section class="search-section flex flex-col items-center mb-16">
            <div class="w-full max-w-2xl relative mb-8">
                <div class="flex items-center bg-white rounded-full shadow-md">
                    <input type="text" placeholder="请输入小说名称/作者/关键词" class="search-input" id="searchInput">
                    <button class="w-12 h-12 flex items-center justify-center" onclick="handleSearch()">
                        <i class="fas fa-search text-gray-400"></i>
                    </button>
                </div>
            </div>

            <!-- 新增: 搜索结果容器 -->
            <div class="flex gap-8 overflow-x-auto pb-4" id="novelList">
            </div>
        </section>

        <section class="hot-section mb-16">
            <h2 class="text-xl font-bold text-gray-800 mb-6">热门搜索</h2>
            <div class="flex flex-wrap gap-4 mb-16">
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">玄幻修真</button>
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">都市情感</button>
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">历史军事</button>
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">科幻灵异</button>
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">网游竞技</button>
                <button class="px-6 py-2 bg-white rounded-full shadow-sm text-secondary hover:text-primary whitespace-nowrap !rounded-button">现代言情</button>
            </div>

            <h2 class="text-xl font-bold text-gray-800 mb-6">热门小说</h2>
            <div class="flex gap-8 overflow-x-auto pb-4" id="randomNovelList"></div>
        </section>

        <footer class="text-center py-16">
            <p class="text-gray-500 mb-2">书海寻踪 - 您的专业小说搜索平台</p>
            <p class="text-gray-500">Copyright © 2024 All Rights Reserved</p>
        </footer>
    </div>

    <script>
        $(document).ready(function() {
            $('#searchButton').click(function() {
                performSearch();
            });

            $('#searchInput').keypress(function(event) {
                if (event.which === 13) { // Enter key pressed
                    performSearch();
                }
            });

            function performSearch() {
                const query = $('#searchInput').val();
                $.ajax({
                    url: `${window.API_BASE_URL}/api/novels`,
                    method: 'GET',
                    data: { query: query },
                    success: function(data) {
                        updateNovelList(data);
                    },
                    error: function(error) {
                        // 使用 layui 弹窗提醒
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('搜索失败: ' + error.responseJSON.error, {icon: 5});
                        });
                    }
                });
            }

            function updateNovelList(novels) {
                const novelListContainer = $('#novelList');
                novelListContainer.empty();
                novels.forEach(novel => {
                    novelListContainer.append(`
                        <div class="flex-shrink-0 w-[200px]">
                            <img src="${novel.cover}" class="book-cover shadow-lg mb-4">
                            <h3 class="book-title font-medium text-gray-800 mb-2">${novel.title}</h3>
                            <p class="text-sm text-gray-500 text-center">${novel.author}</p>
                        </div>
                    `);
                });
            }

            // 新增: 添加 fetchRandomNovels 函数
            function fetchRandomNovels() {
                $.ajax({
                    url: `${window.API_BASE_URL}/api/random-novels`,
                    method: 'GET',
                    success: function(data) {
                        updateRandomNovelList(data);
                    },
                    error: function(error) {
                        // 使用 layui 弹窗提醒
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('随机推荐失败: ' + error.responseJSON.error, {icon: 5});
                        });
                    }
                });
            }

            // 新增: 更新随机小说列表
            function updateRandomNovelList(novels) {
                const randomNovelListContainer = $('#randomNovelList');
                randomNovelListContainer.empty();
                novels.forEach(novel => {
                    randomNovelListContainer.append(`
                        <div class="flex-shrink-0 w-[200px]">
                            <img src="${novel.cover}" class="book-cover shadow-lg mb-4">
                            <h3 class="book-title font-medium text-gray-800 mb-2">${novel.title}</h3>
                            <p class="text-sm text-gray-500 text-center">${novel.author}</p>
                        </div>
                    `);
                });
            }

            // 新增: 页面加载时调用 fetchRandomNovels
            fetchRandomNovels();
        });
    </script>
</body>
</html>
